<template>
  <div>
    <el-row>
      <el-col :span="24" class="expression"
        ><p>
          一个四口之家每周刷牙浪费水量=<b style="color:yellow;">
            {{ result }}
          </b>
        </p></el-col
      >
    </el-row>
    <div style="width:550px;height:30px;font-size:20px;margin-left:220px;">
      <p>虚拟键盘</p>
    </div>
    <el-row style="width:550px;border:1px solid #000;">
      <el-button
        type="success"
        size="small"
        v-for="item in operatorlist"
        :key="item"
        @click="addtext(item)"
        style="width:50px;font-size:36px;"
        >{{ item }}</el-button
      >
      <el-button type="success" @click="deletetext()" style="width:100px;"
        >删除</el-button
      ><br />
      <el-button type="success" @click="addtext('每周7天')" class="btn"
        >每周7天</el-button
      >
            <el-button type="success" @click="addtext('家中包括四个成员')" class="btn"
        >家中包括4个成员</el-button
      >
      <el-button
        type="success"
        v-for="(item, index) in page2answer"
        :key="index"
        @click="addtext(item)"
        class="btn"
        >{{ item }}</el-button
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Computer1",
  props: ["page2answer"],
  created() {
    this.resultlist=this.$store.state.resultlist;
  },
  data() {
    return {
      operatorlist: ["+", "-", "×", "÷", "(", ")"],
      resultlist: [], //计算结果
    };
  },
  computed: {
    result() {
      return this.resultlist.join("");
    },
  },
  methods: {
        updata() {
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    addtext(item) {
      this.resultlist.push(item);
      this.$store.state.answer[4] = this.result;
      this.$store.state.resultlist=this.resultlist
      this.updata()
    },
    deletetext() {
      this.resultlist.pop();
      this.$store.state.answer[4] = this.result;
         this.$store.state.resultlist=this.resultlist
      this.updata()
    },
  },
};
</script>

<style scoped>
button {
  font-size: 20px;
  font-weight: 100;
  padding: 3px;
  margin: 8px;
  width: 200px;
  height: 50px;
}
.btn {
  width: 250px;
}

</style>
